<!DOCTYPE html>
<html>
<head>
    <title>云游戏</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 设置苹果工具栏颜-->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <!-- <meta name="screen-orientation" content="portrait"> -->
    <!-- QQ强制竖屏 -->
    <!-- <meta name="x5-orientation" content="portrait"> -->
    <!-- 不能旋转，问题出在这 -->
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone  -->
    <meta name="msapplication-tap-highlight" content="no">

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: grey;
        }
        #phoneVideo{
            margin: 0 !important;
            /*height: 100% !important;width: 100% !important;*/
            object-fit: fill;
            padding: 0!important;
        }

        .cloud-loading {
            background: url(https://bj.bcebos.com/v1/yunapp-static/web_direct/process.gif) 50% no-repeat;
            background-image: url(https://bj.bcebos.com/v1/yunapp-static/web_direct/process.gif), none;
            background-size: 100%;
            margin: 0 auto;
            display: inline-block;
            vertical-align: middle;
            width: 52px;
            height: 52px;
        }
        .loading-box {
            background-color: white;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column nowrap;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 20px;
            z-index: 99;
        }
        .act_btn{
            display: flex;
            position: fixed;
            top: 0%;
            left: 0%;
            z-index: 999999999999999;
        }
        .backapp{
            background: #409EFF;
            border: none;
            padding: 5px 15px;
            margin: 0 5px;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <!-- 云手机对接sdk,请联系项目经理获取最新版本 -->
    <script type="text/javascript" src="http://shenleyoubk.cqxishui.top/bt_yunphone/static/js/BgsSdk.min.1.33.0.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <script src="//bj.bcebos.com/v1/yunapp-static/bac/res/js/vconsole.min.js"></script>
    <script src="//bj.bcebos.com/v1/yunapp-static/webRTC/jquery.min.js"></script>

</head>
<!--onload="startGame();"-->
<body onload="startGame();" >
<div class="loading-box">
    <div class="cloud-loading"></div>
    <p id="source_load">资源加载中,请耐心等待画面</p>
</div>
<!--<input type="button" value="停止" onclick="stopGame()" style="position: fixed;top: 0; left: 0;">-->
<div class="act_btn">
    <input type="button" value="返回" onclick="onBack()" class="backapp">
    <input type="button" value="主页" onclick="onHome()" class="backapp">
    <input type="button" value="菜单" onclick="onMenu()" class="backapp">
</div>
<div class="phoneBox" id="phoneBox" style="background-color: grey;overflow:hidden;width: 100%;height: 100%;text-align: center;">
</div>
</body>

<script>
    // var vConsole = new VConsole();
    var uuid = GetQueryString('userId')//||'15320321770'; // 有应用来定义，主要用来区分用户
    var clientToken = ''; // 初始化成功后，通过sdk接口获取
    const getServerTokenUrl = 'http://shenleyou.cqxishui.top/api/getServerTokenSystem'; // 后台服务可以参考后台demo 方案
    const disConnectUrl = 'http://shenleyou.cqxishui.top/api/disConnectUrl'; // 后台服务可以参考后台demo 方案
    var serverToken = ''; // 从业务后台获取

    // 初始化参数
    var onlineTime = Number(GetQueryString('end_s'))//3600
    var appId = Number(GetQueryString('appId'))//1;
    var padCode = GetQueryString('padCode');//'VM010129094069'
    var userId = GetQueryString('userId');//'userId'
    // var order_sn = GetQueryString('sk');//'order_sn'
    var goods_id = GetQueryString('goods_id');
    var state = GetQueryString('state');
    var is_chongzhi=0

    if (state == 1){
        is_chongzhi = 1
    }
    async function getServerToken() {
        const res = await axios.post(getServerTokenUrl, {
            uuid: uuid,
            clientToken: clientToken,
            padCode:padCode,
            appId:appId,
            onlineTime:onlineTime,
            // userId:userId,
            // order_sn:order_sn,
            is_chongzhi:is_chongzhi,
            goods_id:goods_id,
        });
        if(res.data.code !== 1000) {
            alert('serverToken获取失败,'+res.data.msg)
            console.log('getServerToken fail res:' + JSON.stringify(res.data));
            return;
        }
        serverToken = res.data.data.serverToken;
        // 开始链接
        BgsSdk.startGame(serverToken);

    }
    function GetQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    function startGame() {

        if(onlineTime==null||onlineTime==undefined||appId==null||appId==undefined||padCode==null||padCode==undefined){
            alert('参数有误，启动失败');return
        }
        console.log("onlineTime_"+typeof onlineTime,onlineTime,"appId_"+typeof appId,appId,"uuid_"+typeof uuid,uuid,"padCode_"+typeof padCode,padCode);
        //   $('.loading-box').fadeIn();
        var params = {
            viewId: 'phoneBox', // 必填
            padCode: padCode,
            uuid: uuid, // 必填
            onlineTime: onlineTime, // 本次最大试玩时长，由业务决定 必填
            appId: appId, // 应用id, 从客户开放平台应用管理页面查询 必填
            width:1080,
            height:1920,
            fps:60,
            bitrate:14000,
            callbacks: {
                // 初始化失败回调
                onInitFail: function(code,msg) {
                    alert(msg)
                    console.log('on init code:' + code + ' msg:' + msg);
                },
                onInitSuccess: function() {
                    console.log('on init success:');
                },
                // 链接成功回调
                onConnectSuccess: function (success) {
                    console.log('on success',success);
                    setTimeout(function(){
                        $('.loading-box').fadeOut();
                    },2000)
                },
                onRunInformation: function (type,info) {
                    console.log('onRunInformation',type,info);
                },
                // 链接失败回调
                onConnectFail: function (code, msg) {
                    // alert(msg)
                    // 11102027:serverToken无效
                    if(msg.split(':')[0] == 11102027||msg.split(':')[0] == 11103103){

                        is_chongzhi = 1
                        getServerToken();
                    }
                    console.log('on fail code:' + code+'msg:'+msg);
                    stopGame();
                },
                // 结束回调
                onStoped: async function() {
                    // 释放设备，并销毁serverToken
                    // const res = await axios.post(disConnectUrl, {
                    //     uuid: uuid,
                    //     serverToken: serverToken
                    //   });
                }
            }
        }
        // 开始初始化
        params.keyCtrlConfigType = 'pass'
        // ["paas","custom","saas"], default is paas
        let initRet = BgsSdk.initGame(params);
        if (initRet) {
            // 获取clientToken
            clientToken = BgsSdk.getClientToken();
            // 获取serverToken
            getServerToken();

        }


    }

    // 结束试玩
    function stopGame() {
        BgsSdk.stopGame();
    }
    //断开链接
    function disconnect(){
        const res =  axios.post(disConnectUrl, {
            uuid: uuid,
            serverToken: serverToken
        });
    }
    function onHome() {
        // 返回桌面
        redfinger.sendCommand(redfinger.KEY_TYPE.KEY_HOMEPAGE);
    }

    function onMenu() {
        // 菜单
        redfinger.sendCommand(redfinger.KEY_TYPE.KEY_MENU);
    }

    function onBack() {
        // 返回
        redfinger.sendCommand(redfinger.KEY_TYPE.KEY_BACK);
    }
</script>
</html>